<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                  :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
                  :file-list="fileList">
        <sdn-button size="small" type="primary">点击上传</sdn-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </sdn-upload>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      radio: '1'
    };
  },
  setup() {
    const btnDesc = {
      title: "Radio 单选框",
      describe: "在一组备选项中进行单选。",
      codeBlock: `<sdn-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                 :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
                 :file-list="fileList">
        <sdn-button size="small" type="primary">点击上传</sdn-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </sdn-upload>`,
      attrs: [{
        "name": "action",
        "describe": "必选参数，上传的地址",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "headers",
        "describe": "设置上传的请求头部",
        "type": "object",
        "emun": "—",
        "default": "—"
      }, {"name": "multiple", "describe": "是否支持多选文件", "type": "boolean", "emun": "—", "default": "—"}, {
        "name": "data",
        "describe": "上传时附带的额外参数",
        "type": "object",
        "emun": "—",
        "default": "—"
      }, {
        "name": "name",
        "describe": "上传的文件字段名",
        "type": "string",
        "emun": "—",
        "default": "file"
      }, {
        "name": "with-credentials",
        "describe": "支持发送 cookie 凭证信息",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "show-file-list",
        "describe": "是否显示已上传文件列表",
        "type": "boolean",
        "emun": "—",
        "default": "TRUE"
      }, {
        "name": "drag",
        "describe": "是否启用拖拽上传",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "accept",
        "describe": "接受上传的文件类型（thumbnail-mode 模式下此参数无效）",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-preview",
        "describe": "点击文件列表中已上传的文件时的钩子",
        "type": "function(file)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-remove",
        "describe": "文件列表移除文件时的钩子",
        "type": "function(file, fileList)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-success",
        "describe": "文件上传成功时的钩子",
        "type": "function(response, file, fileList)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-error",
        "describe": "文件上传失败时的钩子",
        "type": "function(err, file, fileList)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-progress",
        "describe": "文件上传时的钩子",
        "type": "function(event, file, fileList)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-change",
        "describe": "文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用",
        "type": "function(file, fileList)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "before-upload",
        "describe": "上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。",
        "type": "function(file)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "before-remove",
        "describe": "删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。",
        "type": "function(file, fileList)",
        "emun": "—",
        "default": "—"
      }, {
        "name": "list-type",
        "describe": "文件列表的类型",
        "type": "string",
        "emun": "text/picture/picture-card",
        "default": "text"
      }, {
        "name": "auto-upload",
        "describe": "是否在选取文件后立即进行上传",
        "type": "boolean",
        "emun": "—",
        "default": "TRUE"
      }, {
        "name": "file-list",
        "describe": "上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]",
        "type": "array",
        "emun": "—",
        "default": "[]"
      }, {
        "name": "http-request",
        "describe": "覆盖默认的上传行为，可以自定义上传的实现",
        "type": "function",
        "emun": "—",
        "default": "—"
      }, {"name": "disabled", "describe": "是否禁用", "type": "boolean", "emun": "—", "default": "FALSE"}, {
        "name": "limit",
        "describe": "最大允许上传个数",
        "type": "number",
        "emun": "—",
        "default": "—"
      }, {
        "name": "on-exceed",
        "describe": "文件超出个数限制时的钩子",
        "type": "function(files, fileList)",
        "emun": "—",
        "default": "-"
      }],
      slots: [{"name": "trigger", "describe": "触发文件选择框的内容"}, {"name": "tip", "describe": "提示说明文字"}],
      methods: [{
        "name": "clearFiles",
        "describe": "清空已上传的文件列表（该方法不支持在 before-upload 中调用）",
        "params": "—"
      }, {"name": "abort", "describe": "取消上传请求", "params": "（ file: fileList 中的 file 对象 ）"}, {
        "name": "submit",
        "describe": "手动上传文件列表",
        "params": "—"
      }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
